<html><head><meta charset="utf-8"><title>23 前面跳过的unkown类型详解-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/35" target="_blank">零基础学透 TypeScript</a>
                    <a href="" target="_blank">
                        <span>
                            / 3-10 23 前面跳过的unkown类型详解
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                23 前面跳过的unkown类型详解
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-07-02 14:25:09
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img1.mukewang.com/5d0c3cde00013d3206400359.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">人生的旅途，前途很远，也很暗。然而不要怕，不怕的人的面前才有路。<p class="author">—— 鲁 迅</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">学习完交叉类型、联合类型、类型断言、映射类型、索引后，我们就可以补充一个基础类型中没有讲的知识了，就是 TS 在 3.0 版本新增的顶级类型 unknown。它相对于 any 来说是安全的。关于 unknown 类型，有如下几点需要注意，我们来逐个讲解和举例学习：</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><strong>(1) 任何类型的值都可以赋值给 unknown 类型：</strong></p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> value1<span class="token punctuation">:</span> unknown<span class="token punctuation">;</span>
value1 <span class="token operator">=</span> <span class="token string">"a"</span><span class="token punctuation">;</span>
value1 <span class="token operator">=</span> <span class="token number">123</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><strong>(2) 如果没有类型断言或基于控制流的类型细化时 unknown 不可以赋值给其它类型，此时它只能赋值给 unknown 和 any 类型：</strong></p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> value2<span class="token punctuation">:</span> unknown<span class="token punctuation">;</span>
<span class="token keyword">let</span> value3<span class="token punctuation">:</span> <span class="token keyword">string</span> <span class="token operator">=</span> value2<span class="token punctuation">;</span> <span class="token comment">// error 不能将类型“unknown”分配给类型“string”</span>
value1 <span class="token operator">=</span> value2<span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><strong>(3) 如果没有类型断言或基于控制流的类型细化，则不能在它上面进行任何操作：</strong></p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> value4<span class="token punctuation">:</span> unknown<span class="token punctuation">;</span>
value4 <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment">// error 对象的类型为 "unknown"</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><strong>(4) unknown 与任何其它类型组成的交叉类型，最后都等于其它类型：</strong></p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">type</span> type1 <span class="token operator">=</span> unknown <span class="token operator">&amp;</span> <span class="token keyword">string</span><span class="token punctuation">;</span> <span class="token comment">// type1 =&gt; string</span>
<span class="token keyword">type</span> type2 <span class="token operator">=</span> <span class="token keyword">number</span> <span class="token operator">&amp;</span> unknown<span class="token punctuation">;</span> <span class="token comment">// type2 =&gt; number</span>
<span class="token keyword">type</span> type3 <span class="token operator">=</span> unknown <span class="token operator">&amp;</span> unknown<span class="token punctuation">;</span> <span class="token comment">// type3 =&gt; unknown</span>
<span class="token keyword">type</span> type4 <span class="token operator">=</span> unknown <span class="token operator">&amp;</span> <span class="token keyword">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// type4 =&gt; string[]</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><strong>(5) unknown 与任何其它类型组成的联合类型，都等于 unknown 类型，但只有any例外，unknown与any组成的联合类型等于any)：</strong></p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">type</span> type5 <span class="token operator">=</span> <span class="token keyword">string</span> <span class="token operator">|</span> unknown<span class="token punctuation">;</span> <span class="token comment">// type5 =&gt; unknown</span>
<span class="token keyword">type</span> type6 <span class="token operator">=</span> <span class="token keyword">any</span> <span class="token operator">|</span> unknown<span class="token punctuation">;</span> <span class="token comment">// type6 =&gt; any</span>
<span class="token keyword">type</span> type7 <span class="token operator">=</span> <span class="token keyword">number</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">|</span> unknown<span class="token punctuation">;</span> <span class="token comment">// type7 =&gt; unknown</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><strong>(6) never 类型是 unknown 的子类型：</strong></p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">type</span> type8 <span class="token operator">=</span> never <span class="token keyword">extends</span> <span class="token class-name">unknown</span> <span class="token operator">?</span> <span class="token keyword">true</span> <span class="token punctuation">:</span> <span class="token keyword">false</span><span class="token punctuation">;</span> <span class="token comment">// type8 =&gt; true</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><strong>(7) keyof unknown 等于类型 never：</strong></p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">type</span> type9 <span class="token operator">=</span> keyof unknown<span class="token punctuation">;</span> <span class="token comment">// type9 =&gt; never</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><strong>(8) 只能对 unknown 进行等或不等操作，不能进行其它操作：</strong></p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript">value1 <span class="token operator">===</span> value2<span class="token punctuation">;</span>
value1 <span class="token operator">!==</span> value2<span class="token punctuation">;</span>
value1 <span class="token operator">+=</span> value2<span class="token punctuation">;</span> <span class="token comment">// error</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><strong>(9) unknown 类型的值不能访问其属性、作为函数调用和作为类创建实例：</strong></p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> value5<span class="token punctuation">:</span> unknown<span class="token punctuation">;</span>
value5<span class="token punctuation">.</span>age<span class="token punctuation">;</span> <span class="token comment">// error</span>
<span class="token function">value5</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// error</span>
<span class="token keyword">new</span> <span class="token class-name">value5</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// error</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><strong>(10) 使用映射类型时如果遍历的是 unknown 类型，则不会映射任何属性：</strong></p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">type</span> Types<span class="token operator">&lt;</span>T<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>P <span class="token keyword">in</span> keyof T<span class="token punctuation">]</span><span class="token punctuation">:</span> <span class="token keyword">number</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">type</span> type10 <span class="token operator">=</span> Types<span class="token operator">&lt;</span><span class="token keyword">any</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token comment">// type10 =&gt; { [x: string]: number }</span>
<span class="token keyword">type</span> type11 <span class="token operator">=</span> Types<span class="token operator">&lt;</span>unknown<span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token comment">// type10 =&gt; {}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们在实际使用中，如果有类型无法确定的情况，要尽量避免使用 any，因为 any 会丢失类型信息，一旦一个类型被指定为 any，那么在它上面进行任何操作都是合法的，所以会有意想不到的情况发生。因此如果遇到无法确定类型的情况，要先考虑使用 unknown。</p>
</div><div class="cl-preview-section"><h3 id="本节小结">本节小结</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节我们详细学习了 unknown 类型，它和 any 有相似的特点，就是制定一个类型是任意的，但是区别在于制定一个类型为 any 的话，可以在这个值上做任意操作，而 unknown 类型则不允许在没有类型断言或基于控制流的类型细化时对 unknown 类型的值做任何操作。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下个小节我们将学习条件类型，它看起来像是三元操作符的写法，其实效果确实很像，只不过它判断的是类型，返回的结果也是类型。<br>
<img src="http://img.mukewang.com/5d03463300011cf516000466.jpg" alt="图片描述" data-original="http://img.mukewang.com/5d03463300011cf516000466.jpg" class="" style="cursor: pointer;"></p>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/359">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    22 使用映射类型得到新的类型
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/361">
                                                    <div class="next r clearfix">
                                <p>
                                    24 条件类型，它不是三元操作符的写法吗？
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">
        </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>